<template>
  <view>
    <!-- 标题 -->
    <view class="logobox">
      <view class="logo">
        <cover-image class="img" src="../../static/logo.png"></cover-image>
      </view>
      <view class="apptitle">平安智慧通行证</view>
    </view>
    <!-- 选项卡 -->
    <view class="tabbox">
      <van-tabs
        title-inactive-color="#ccc"
        color="#FE7B5A"
        title-active-color="#000"
        :active="active"
        swipeable
        @click="onClick"
      >
        <van-tab title-style="font-weight:600;font-size:40rpx" title="登录">
          <view class="login-form">
            <u-form :model="loginform" ref="uForm">
              <!-- 手机号 -->
              <view class="item_common">
                <view class="icon_common">
                  <cover-image class="img" src="../../static/logo.png">
                  </cover-image>
                </view>
                <view class="right_item_common">
                  <u-form-item
                    ><u-input
                      placeholder="请输入手机号"
                      v-model="loginform.phonenumber"
                  /></u-form-item>
                </view>
              </view>
              <!-- 密码 -->
              <view class="item_common">
                <view class="icon_common">
                  <cover-image class="img" src="../../static/logo.png">
                  </cover-image>
                </view>
                <view class="right_item_common">
                  <u-form-item
                    ><u-input
                      placeholder="请输入密码"
                      v-model="loginform.password"
                  /></u-form-item>
                </view>
              </view>
              <!-- 登录 -->
              <view>
                <u-button
                  @click="handleLogin"
                  type="warning"
                  size="default"
                  shape="round"
                  >登录</u-button
                >
              </view>
              <!-- 微信授权登录 -->
              <view class="weixin-login">
                <view class="weixinicon">
                  <cover-image
                    class="weixinimg"
                    src="../../static/logo.png"
                  ></cover-image>
                </view>
                <text class="weixintip">授权登录</text>
              </view>
            </u-form>
          </view>
        </van-tab>
        <van-tab title-style="font-weight:600;font-size:40rpx" title="注册">
          <view class="login-form">
            <u-form :model="registerform" ref="uForm">
              <!-- 姓名 -->
              <view class="item_common">
                <view class="icon_common">
                  <cover-image class="img" src="../../static/logo.png">
                  </cover-image>
                </view>
                <view class="right_item_common">
                  <u-form-item
                    ><u-input
                      placeholder="请输入姓名"
                      v-model="registerform.name"
                  /></u-form-item>
                </view>
              </view>
              <!-- 电话 -->
              <view class="item_common">
                <view class="icon_common">
                  <cover-image class="img" src="../../static/logo.png">
                  </cover-image>
                </view>
                <view class="right_item_common">
                  <u-form-item
                    ><u-input
                      placeholder="请输入电话号码"
                      v-model="registerform.phonenumber"
                  /></u-form-item>
                </view>
              </view>
              <!-- 用户名 -->
              <view class="item_common">
                <view class="icon_common">
                  <cover-image class="img" src="../../static/logo.png">
                  </cover-image>
                </view>
                <view class="right_item_common">
                  <u-form-item
                    ><u-input
                      placeholder="请输入用户名"
                      v-model="registerform.username"
                  /></u-form-item>
                </view>
              </view>
              <!-- 密码 -->
              <view class="item_common">
                <view class="icon_common">
                  <cover-image class="img" src="../../static/logo.png">
                  </cover-image>
                </view>
                <view class="right_item_common">
                  <u-form-item
                    ><u-input
                      placeholder="请输入密码"
                      v-model="registerform.password"
                  /></u-form-item>
                </view>
              </view>
              <!-- 注册 -->
              <view>
                <u-button
                  @click="handleRegister"
                  type="warning"
                  size="default"
                  shape="round"
                  >注册</u-button
                >
              </view>
            </u-form>
          </view>
        </van-tab>
      </van-tabs>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      // 登录
      loginform: {
        //   手机号
        phonenumber: "",
        // 密码
        password: "",
      },
      // 注册
      registerform: {
        // 姓名
        name: "",
        // 电话
        phonenumber: "",
        // 用户名
        username: "",
        // 密码
        password: "",
      },
    };
  },
  methods: {
    // 解决初次加载显示登录或注册的问题
    onClick(name) {
      let index = name.detail.index;
      this.active = index;
    },
    // 登录
    handleLogin() {
      // this.loginform = {
      //   phonenumber: this.loginform.phonenumber,
      //   pass: this.loginform.password,
      // };
      // console.log(this.loginform);
      uni.switchTab({
        url: "/pages/pass/pass",
      });
    },
    // 注册
    handleRegister() {
      this.active = 0;
      // this.registerform = {
      //   name: this.registerform.name,
      //   phonenumber: this.registerform.phonenumber,
      //   username: this.registerform.username,
      //   password: this.registerform.password,
      // };
      // console.log(this.registerform);
    },
  },
};
</script>

<style lang="less" scoped >
page {
  background: orange;
}

.logobox {
  text-align: center;
}
.logo {
  width: 200rpx;
  height: 200rpx;
  margin: 0 auto;
  .img {
    width: 100%;
  }
}

.logobox .apptitle {
  font-size: 40rpx;
  font-weight: 500;
  letter-spacing: 4rpx;
  margin-top: 10rpx;
  color: #fff;
}
.tabbox {
  width: 90%;
  // height: 650rpx;
  background-color: white;
  border-radius: 30rpx;
  margin: 0 auto;
  margin-top: 60rpx;
  padding: 20rpx 0;
}
.login-form {
  border-top: 1px solid #ccc;
  margin-top: 50rpx;
  padding: 10rpx 40rpx;
}
.item_common {
  height: 100rpx;
  border: 1px solid #ccc;
  width: 100%;
  display: flex;
  border-radius: 20rpx;
  align-items: center;
  margin: 40rpx 0;
  padding: 0 20rpx;

  .icon_common {
    width: 50rpx;
    height: 50rpx;
    margin: 0 20rpx 0 0;
    img {
      width: 100%;
    }
  }
  .right_item_common {
    flex: 1;
  }
}
.weixin-login {
  margin-top: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  .weixinicon {
    width: 50rpx;
    height: 50rpx;
    .weixinimg {
      width: 100%;
    }
  }
  .weixintip {
    font-size: 30rpx;
    color: #e1635a;
    margin-left: 5rpx;
    text-decoration: underline;
  }
}
</style>

